<template>
    <MyLoading v-if="loadingTag" />
    <div class="films" v-else ref="filmsBox">
        <div class="item" v-for="(item, index) in list" @click="goDetail(item.filmId)" :key="index">
            <div class="left"><img :src="item.poster" /></div>
            <div class="middle">
                <div>{{ item.name }}</div>
                <div>
                    <span>观众评分</span>
                    <span>{{ item.grade }}</span>
                </div>
                <div>主演：{{ parseActors(item.actors) }}</div>
                <div>{{ item.nation }} | {{ item.runtime }}分钟</div>
            </div>
            <div class="right">
                <span v-if="type === 1">购票</span>
                <span v-else>预约</span>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, defineProps, type PropType, onMounted } from "vue";
import MyLoading from "./MyLoading.vue";
// 导入电影列表的相关关键属性数据
import type { ActorType, ListType } from "../types/index";
import { useRouter } from "vue-router";

const router = useRouter();

let loadingTag = ref<boolean>(true);

const props = defineProps({
    list: {
        type: Array as PropType<ListType[]>,
        default: () => []
    },
    type: {
        type: Number,
        default: () => 0
    },
})
if (props.list.length > 0) loadingTag.value = false;

const goDetail = (id: number) => {
    console.log("跳转至指定页面：" + id);
    router.push("/detial/"+id)
}

const parseActors = (value: ActorType[]) => {
    let actors = "";
    if(!value){
        return "未知演员"
    }
    value.forEach((element: { name: string; }) => {
        actors += element.name + " ";
    });
    return actors;
}
const emit = defineEmits(['getMoreData']);
let filmsBox = ref<HTMLDivElement | null>(null);
const debounce = (func: { (): void; (arg0: any): void; },delay: number | undefined)=>{
     let timer: number | null | undefined = null;
    return function(){
        if(timer){
            clearTimeout(timer);
              timer = null;
        }
        timer = setTimeout(()=>{
            func(...arguments);
        },delay);
    }
}
onMounted(()=>{
    // 这里使用防抖（一段时间内不管触发多少次，都会重新计算执行时间，只执行最后一次）
    // 节流（一段时间内，不管连续触发多少次只执行一次）
    window.onscroll = debounce(() => {
        if (window.pageYOffset + 50 + window.innerHeight > filmsBox.value?.scrollHeight) {
            console.log("滚动置底了！间隔50像素!");
            emit("getMoreData")
        }
    }, 300)
})

</script>
<style lang="scss" scoped>
.films {
    padding-bottom: 60px;
    // padding-top: 50px;

    .item {
        margin-top: 15px;
        padding-bottom: 10px;
        padding-top: 10px;
        display: flex;
        color: #797d82;
        font-size: 13px;
        border-bottom: 1px solid #e7d8d8;
        background-color: #fff;

        .left {
            width: 77px;
            height: 100px;
            margin-left: 20px;

            img {
                width: 66px;
                height: 100%;
            }
        }

        .middle {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 55%;

            div:nth-of-type(1) {
                color: #191a1b;
                font-size: 16px;
            }

            div:nth-of-type(3) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .right {
            width: 15%;
            display: flex;
            align-items: center;
            margin-right: 20px;

            span {
                border: 1px solid #ff5f16;
                background: white;
                color: #ff5f16;
                border-radius: 2px;
                height: 25px;
                line-height: 25px;
                font-size: 13px;
                width: 50px;
                text-align: center;
            }
        }
    }
}
</style>